<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/pageloader.css">
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src=${contextPath}/static/layer/layer.js></script>
    <title>大屏显示</title>
    <style type="text/css">
        body {
            width: 1920px;
            height: 1132px;
        }
        .bg-div {
            position: relative;
        }
        .bg-image {
            position: absolute;
        }
        .gobackbtn {
            position: absolute;
            top: 18px;
            left: 30px;
            width: 400px;
        }
        .clock {
            position: absolute;
            top: 1080px;
            left: 750px;
            width: 500px;
        }
        .c-icon {
            margin-bottom: 8px;
        }
        .time {
            color: #c7c7c7;
            font-size: 24px;
        }
        .div1 {
            position: absolute;
            top: 160px;
            left: 40px;

        }
        .div2 {
            position: absolute;
            top: 460px;
            left: 40px;

        }
        .div3 {
            position: absolute;
            top: 830px;
            left: 40px;

        }
        .div5 {
            position: absolute;
            top: 200px;
            left: 650px;
        }
        .div6 {
            position: absolute;
            top: 830px;
            left: 675px;

        }

        .div7 {
            position: absolute;
            top: 180px;
            right: 160px;

        }
        .div8 {
            position: absolute;
            top: 505px;
            right: 160px;

        }
        .div9 {
            position: absolute;
            top: 780px;
            right: 50px;

        }
        .left-a {
            margin-left: 40px;
        }
        .left-b{
            margin-left: 80px;
        }
        .bottom-d {
            margin-top: 20px;
        }
        .shuichengbtn {
            position: absolute;
            top: 170px;
            left: 138px;
            width: 70px;
            height:  35px;
            background-color: #ff000000;
            border:  none;
        }
        .zhongshanbtn {
            position: absolute;
            top: 40px;
            left: 90px;
            width: 80px;
            height:  60px;
            background-color: #ff000000;
            border:  none;
        }
        .liuzhibtn {
            position: absolute;
            top: 204px;
            left: 258px;
            width: 70px;
            height:  35px;
            background-color: #ff000000;
            border:  none;
        }
        .panxianbtn {
            position: absolute;
            top: 314px;
            left: 66px;
            width: 60px;
            height:  35px;
            background-color: #ff000000;
            border:  none;
        }
        .alink-btn {
            position: absolute;
            top: 110px;
            left: 68px;
            width: 96px;
            height:  35px;
            background-color: #ff000000;
            border:  none;
        }
        .div-top{
            margin-top: 40px;
        }
        .map-info{
            position: absolute;
            top: -50px;
            left: 387px;
            width: 220px;
            border:  none;
        }
        .map-info p{
            float: right;
            font-size: 16px;
            color: white;
        }
        .map-info >.num-size{
            font-size: 16px;
            color: white;
            color: rgb(1, 245, 250);
        }
        .count-info {
            position: absolute;
            float: right;
            top: 400px;
            left: 100px;
            width: 300px;
            border:  none;
        }
        .count-info p{
            clear:both;
            color: white;
        }
        .count-info >.num span{
            display: inline-block;
            width: 25px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            background-color: #00b0ff;
            color:#fff;
            font-size: 35px;
            font-family: Consolas;
            margin-top: 15px;
        }
        .count-info>.num{
            float: right;
        }
        .num span:nth-last-child(4n){
            background-color: transparent;
            width: 10px;
        }

    </style>
</head>
<body>
<div id="bonfire-pageloader">
    <div class="bonfire-pageloader-icon" style="left:800px;top:300px">
        <img src="${contextPath}/static/image/daping/icon/city.png">
    </div>
</div>
<div class="bg-div">
    <img class="bg-image" src="${contextPath}/static/image/daping/icon/beijing.jpg">

    <div class="gobackbtn">
        <button type="button" style="background-color: #ffffff2e;border-color: #2b2b2b94;"
                class="btn btn-default" onclick="javascript :history.back(-1)">返回首页</button>
    </div>
    <div class="clock">
        <img class="c-icon" src="${contextPath}/static/image/daping/icon/clock.png">
        <span id="time" class="time"></span>
    </div>
    <div class="div1">
        <!-- 车辆跟踪 -->
        <a class="" href="${contextPath}/checking/toCarLocationPage" target="_blank">
            <img src="${contextPath}/static/image/daping/icon/wuliu1.png">
        </a>
        <!-- 配送统计 -->
        <a style="margin-left: -20px" href="${contextPath}/shop/toAOGStatisticsList" target="_blank">
            <img src="${contextPath}/static/image/daping/icon/wuliu2.png" >
        </a>
    </div>

    <div class="div2">
        <div class="div-top">
            <!-- 品规当月数据 -->
            <a class="left-a" href="${contextPath}/page/productanalyze" target="_blank">
                <img src="${contextPath}/static/image/daping/icon/bb1.png">
            </a>
            <!-- 营销活动到物料投放 -->
            <a class="left-a" href="${contextPath}/page/scratchoff" target="_blank">
                <img src="${contextPath}/static/image/daping/icon/bb2.png">
            </a>
            <!-- 单品历史变化 -->
            <a class="left-a" href="${contextPath}/checking/toSmokeCustomerStatistics" target="_blank">
                <img src="${contextPath}/static/image/daping/icon/bb3.png">
            </a>
        </div>

    </div>

    <div class="div3">
        <div>
            <!-- 当日实时订单情况 -->
            <a class="left-a" href="${contextPath}/page/orderDataStatistics" target="_blank">
                <img src="${contextPath}/static/image/daping/icon/cc1.png">
            </a>
            <!-- 历史销售 -->
            <a class="left-a" href="${contextPath}/shop/toSmokeShopStatistics" target="_blank">
                <img src="${contextPath}/static/image/daping/icon/cc2.png">
            </a>
            <!-- 社会库存 -->
            <a class="left-a" href="${contextPath}/page/stock" target="_blank">
                <img src="${contextPath}/static/image/daping/icon/cc3.png">
            </a>
        </div>

    </div>

    <div class="div5">
        <img src="${contextPath}/static/image/daping/icon/dt.png">
        <button type="button"  class="shuichengbtn" data-toggle="tooltip" data-placement="top" onmouseover="getBigScreenData('11520204')"></button>
        <button type="button" class="zhongshanbtn" data-toggle="tooltip" data-placement="top" onmouseover="getBigScreenData('11520205')"></button>
        <button type="button" class="liuzhibtn" data-toggle="tooltip" data-placement="top" onmouseover="getBigScreenData('11520202')"></button>
        <button type="button" class="panxianbtn" data-toggle="tooltip" data-placement="top" onmouseover="getBigScreenData('11520203')"></button>
        <div class="map-info">
            <p style="margin-left: 100px;margin-bottom: 15px">年度销售数量</p>
            <p style="font-size: 30px" class="num-size" id="bscount"></p>
            <p style="margin-left: 60px;margin-bottom: 15px">年度销售数量占比</p>
            <p style="font-size: 30px" class="num-size" id="bscountpercent"></p>
            <p style="margin-left: 100px;margin-bottom: 15px">年度销售收入</p>
            <p style="font-size: 30px" class="num-size" id="bssale"></p>
            <p style="margin-left: 60px;margin-bottom: 15px">年度销售收入占比</p>
            <p style="font-size: 30px" class="num-size" id="bssalepercent"></p>
            <p style="margin-left: 100px;margin-bottom: 15px">年度销售单箱</p>
            <p style="font-size: 30px" class="num-size" id="bsbox"></p>
            <p style="margin-left: 60px;margin-bottom: 15px">年度销售单箱占比</p>
            <p style="font-size: 30px" class="num-size" id="bsboxpercent"></p>
        </div>
        <div class="count-info">
            <p style="font-size: 20px;padding-left: 200px" >当前总用户</p>
            <div class="num" id="count">

            </div>
        </div>
    </div>

    <div class="div6">
        <!-- 文本消息推送 -->
        <a class="left-a" href="${contextPath}/sys/user/home#page/clouderpCloudlingText" target="_blank">
            <img src="${contextPath}/static/image/daping/icon/dd1.png">
        </a>
        <!-- 自律小组 -->
        <a class="left-a" href="${contextPath}/shop/toConsumerInfo" target="_blank">
            <img src="${contextPath}/static/image/daping/icon/dd2.png">
        </a>
        <!-- 推荐订单统计 -->
        <a class="left-a" href="${contextPath}/sys/user/home#page/clouderpOrderRecommendstatistics" target="_blank">
            <img src="${contextPath}/static/image/daping/icon/dd3.png">
        </a>
    </div>

    <div class="div7">
        <!-- 客户基本信息 -->
        <a class="" href="${contextPath}/checking/toCustomerLocationPage" target="_blank">
            <img src="${contextPath}/static/image/daping/icon/ee1.png">
        </a>
        <!-- 订单查询 -->
        <a class="left-b" href="${contextPath}/page/splOrderStatisticsView" target="_blank">
            <img src="${contextPath}/static/image/daping/icon/ee2.png">
        </a>
    </div>

    <div class="div8">
        <!-- 消费行为记录 -->
        <a class="" href="${contextPath}/checking/toSmokeCustomerPage" target="_blank">
            <img src="${contextPath}/static/image/daping/icon/ff1.png">
        </a>
        <!-- 消费行为分析 -->
        <a class="left-b" href="${contextPath}/checking/toSmokeCustomerStatistics" target="_blank">
            <img src="${contextPath}/static/image/daping/icon/ff2.png">
        </a>
    </div>
    <div class="div9">
        <a class="" href="${contextPath}/checking/generalLedgerPage" target="_blank">
            <img src="${contextPath}/static/image/daping/icon/xf.png">
        </a>
    </div>
    <a target="_blank" href="${contextPath}/shop/toLogistics" class="alink-btn"></a>
    <a target="_blank" href="${contextPath}/shop/toIndustry" style="top: 421px;" class="alink-btn"></a>
    <a target="_blank" href="${contextPath}/shop/toMarketing" style="top: 744px;" class="alink-btn"></a>
    <a target="_blank" href="${contextPath}/shop/toCustomerService" style="top: 744px;left: 910px;" class="alink-btn"></a>
    <a target="_blank" href="${contextPath}/shop/toMonopoly" style="left: 1765px;" class="alink-btn"></a>
    <a target="_blank" href="${contextPath}/shop/toConsumerBrand" style="left: 1370px;top: 454px;color: #fff;" class="alink-btn">工业
    </a>
    <a target="_blank" href="${contextPath}/shop/toConsumerShop" style="left: 1450px;top: 454px;color: #fff;" class="alink-btn">店铺
    </a>
    <a target="_blank" href="${contextPath}/shop/toConsumerSelf" style="left: 1550px;top: 454px;color: #fff;" class="alink-btn">消费者
    </a>
</div>
</body>
<script  type="text/javascript" src="${contextPath}/static/statistics/js/pageloader.js"></script>
<script language="javascript" type="text/javascript">
    function checkTime(i){  //补位处理
        if(i<10)
        {
            i="0"+i;     //当秒分小于10时，在左边补0；
        }
        return i;
    }
    function showTime(){
        var now=new Date();
        var year=now.getFullYear();
        var month=now.getMonth()+1; //js获取的月份是从0开始；
        var day=now.getDate();
        var h=now.getHours();
        var m=now.getMinutes();
        var s=now.getSeconds();
        m=checkTime(m)
        s=checkTime(s)

        var weekday=new Array(7)
        weekday[0]="星期日"
        weekday[1]="星期一"
        weekday[2]="星期二"
        weekday[3]="星期三"
        weekday[4]="星期四"
        weekday[5]="星期五"
        weekday[6]="星期六"
        var w=weekday[now.getDay()]; //js获取的星期是0~6,0是星期天；
        document.getElementById("time").innerHTML=""+year+"年"+month+"月"+day+"日 "+w+"  "+h+":"+m+":"+s;
        t=setTimeout('showTime()',1000)
    }


    var formatNum =  function (num) {
        if (!num) {
            return '0';
        }


        if (num > 100000000) {
            return (num / 100000000).toFixed(2) + "亿";
        }
        if (num > 10000) {
            return (num / 10000).toFixed(2) + "万";
        }

        if (num.toString().indexOf('.') > 0) {
            return (num * 1).toFixed(2)
        }

        return num
    };

    var managerPayAmt = function (payAmt) {
        if (!payAmt) {
            return '0元';
        }
        if (payAmt > 100000000) {
            return (payAmt / 100000000).toFixed(2) + "亿";
        }
        if (payAmt > 10000) {
            return (payAmt / 10000).toFixed(2) + "万";
        }
        return payAmt
    }

    
    function getTitle(num1,dingYanNum,orderQty,expNum,stockNum,bindCarNum,payNum,payCountNum,payAmt) {

        return "<div style='text-align: left;font-size: 15px;width: 250px;'>" +
            "注册总数：" + formatNum(num1)+
            "<br> 订烟户数：" + formatNum(dingYanNum)+
            "<br> 订货数量：" + formatNum(orderQty/250) +'箱'+
            "<br> 订货比例：" + formatNum(dingYanNum/num1*100) + '%'+
            "<br> 试点店铺：" + formatNum(expNum)+
            "<br> 库存数量：" + formatNum(stockNum/250) + '箱'+
            "<br> 绑卡总数：" + formatNum(bindCarNum)+
            "<br> 支付户数：" + formatNum(payNum)+
            "<br> 支付笔数：" + formatNum(payCountNum)+
            "<br> 支付金额：" + formatNum(payAmt)+
            "<br> 支付比例：" + formatNum(payNum/bindCarNum*100) + '%' +
            "</div>"
    }


    function getStatisticsData() {
        $.ajax({
            url: '${contextPath}/page/getBigScreenStatisticsData',
            type: 'get',
            success: function (data) {
                if (data.success == false) {
                    layer.msg("获取出错：" + data.message);
                    return
                }
                var sData = data.data;
                var scd = sData.scd;
                var zsd = sData.zsd;
                var lzd = sData.lzd;
                var pxd = sData.psd;

                if (scd)
                $(".shuichengbtn").attr("title",getTitle(scd.registerNum,scd.dingYanNum,scd.orderQty,scd.expNum,scd.stockNum,scd.bindCarNum,scd.payNum,scd.payCountNum,scd.payAmt));
                if (zsd)
                $(".zhongshanbtn").attr("title",getTitle(zsd.registerNum,zsd.dingYanNum,zsd.orderQty,zsd.expNum,zsd.stockNum,zsd.bindCarNum,zsd.payNum,zsd.payCountNum,zsd.payAmt));
                if (lzd)
                $(".liuzhibtn").attr("title",getTitle(lzd.registerNum,lzd.dingYanNum,lzd.orderQty,lzd.expNum,lzd.stockNum,lzd.bindCarNum,lzd.payNum,lzd.payCountNum,lzd.payAmt));
                if (pxd)
                $(".panxianbtn").attr("title",getTitle(pxd.registerNum,pxd.dingYanNum,pxd.orderQty,pxd.expNum,pxd.stockNum,pxd.bindCarNum,pxd.payNum,pxd.payCountNum,pxd.payAmt));
                $('[data-toggle="tooltip"]').tooltip({html : true});

            },
            error: function (error) {
                layer.msg('网络错误');
            }
        })
    }

    function getBigScreenData(data){
        var key = data;
        if(data==999){
            data=null;
        }
        $.ajax({
            url: '${contextPath}/page/getBigScreenData',
            type: 'get',
            data:{
                centerCode:data
            },
            success: function (data) {
                if(data.code=="200"){
                    var data = data.data[0];
                    var v1,v2,v3;
                    if(key==11520204){//水城区
                        v1=19356;
                        v2=56362.74;
                        v3=29119;
                    }else if(key==11520202){//六枝
                        v1=18756;
                        v2=53900.99;
                        v3=28738;
                    }else if(key==11520203){//盘县
                        v1=40998;
                        v2=120140.54;
                        v3=29304;
                    }else if(key==11520205){//钟山区
                        v1=30890;
                        v2=119945.87;
                        v3=38830;
                    }else{
                        v1=110000;//销售箱
                        v2=350350.14;//销售目标
                        v3=31850;//销售单箱
                    }
                    $("#bscount").html((data.BOX).toFixed(2)+"箱");
                    $("#bscountpercent").html((data.BOX/v1*100).toFixed(2)+"%");
                    $("#bssale").html((data.TOTAL/10000).toFixed(2)+"万元");
                    $("#bssalepercent").html((data.TOTAL/10000/v2*100).toFixed(2)+"%");
                    $("#bsbox").html((data.TOTAL/(data.BOX)).toFixed(2)+"元");
                    $("#bsboxpercent").html(((data.TOTAL/(data.BOX))/v3*100).toFixed(2)+"%");
                    var html = "";
                    var flag=0;
                    var count = $("#count");
                    count.html("");
                    var len = data.PERSON.toString().length;
                    if(len>3){
                        if(len<=6){
                            var a = len-3;
                        }else{
                            var a = len-6;
                            var b = len-3;
                        }
                    }
                    for(var i = 0; i<len;i++){
                        flag++;
                        var q = data.PERSON.toString().substring(i,i+1);
                        if(a==i||b==i){
                            html+='<span>,</span>';
                        }
                        html+='<span>'+q+'</span>';
                    }
                    count.html(html);
                }
            }
        })
        if(key==999){
            t=setTimeout('getBigScreenData()',30000)
        }

    }

    function deleteDiv()
    {
        var my = document.getElementById("bonfire-pageloader");
        if (my != null){
            my.parentNode.removeChild(my);
         }
    }
    $(function () {
        showTime();     //网页一加载就调用showTime()函数;
        getStatisticsData();
        getBigScreenData("999");
        setTimeout("deleteDiv()",1600)
    });
</script>
</html>